<template>
    <div class="hot-ullist-wrap">
        <div class="ullist">
            <CompItem
                v-if="list.length > 0"
                @click="handleClick(item)"
                :src="item.cover"
                :class="(index + 1) % 4 == 0 ? 'clear-margin-right' : ''"
                item-width="280px"
                v-for="(item, index) in list"
                :key="item.id"
            >
                <slot :item="item"></slot>
            </CompItem>
            <div v-else class="no-data">
                <!-- 没有数据 -->
                <el-empty description="暂无数据" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import CompItem from "@/components/contests/CompItem.vue";
import { useRouter } from "vue-router";
const router = useRouter();
interface Props {
    list: {
        title: string;
        // 报名时间
        registrationTime?: string;
        // 比赛时间
        matchTime?: string;
        // 活动时间
        activityTime?: string;
        sponsor: string;
        text?: string;
        cover?: string;
        endDate?: string;
        enrollEndDate?: string;
        enrollStartDate?: string;
        id?: string;
        isTeam?: string;
        name?: null;
        organizer?: string;
        pour?: 25;
        startDate?: string;
    }[];
    type: number;
}
// @ts-ignore
const props = defineProps<Props>();

// 获取 竞赛的 详情 数据
const handleClick = (item: any) => {
    let type = props.type;
    const contestId = item?.id;
    const categoryId = item?.categoryId;
    if (type === 0) {
        // 竞赛
        router.push({
            path: "/contest-details",
            query: { contestId, categoryId, type },
        });
    } else {
        // 活动
        router.push({
            path: "/events-details",
            query: { contestId, categoryId, type },
        });
    }
};
</script>

<style lang="scss" scoped>
.hot-ullist-wrap {
    > .vstitle {
        display: flex;
        align-items: baseline;
        width: 1200px;
        margin: 42px auto 35px;

        > .title {
            font-family: "AlimamaShuHeiTiBold";
            font-size: 28px;
            color: #31363f;
            font-weight: 700;
            margin-right: 30px;
            position: relative;
            padding-left: 60px;

            &::before {
                content: "";
                position: absolute;
                bottom: -7px;
                left: 0;
                width: 60px;
                height: 60px;
                background: url("https://cdn3.saikr.com/img/saikrnew/vs/trophy_pic@2x.png") no-repeat;
                background-size: auto;
                background-size: 100% 100%;
            }
        }

        > .itemlinks {
            display: flex;
            margin-right: auto;

            > .i-link {
                font-size: 14px;
                color: #909eab;
                padding-right: 5px;
                margin-right: 15px;
                position: relative;
            }
        }
    }

    > .ullist {
        display: flex;
        width: 1200px;
        margin: 0 auto;
        flex-wrap: wrap;
        .info {
            padding: 13px 16px 10px;
            box-sizing: border-box;

            > .title {
                display: block;
                font-size: 20px;
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 隐藏溢出的内容 */
                text-overflow: ellipsis;
                /* 显示省略号 */
                color: #474b5f;
            }

            > .item-tit {
                margin-top: 5px;
                font-size: 13px;
                color: #666666;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            > .item-detail {
                margin-top: 16px;
                height: 84px;
                border-radius: 6px;
                background: #f5f5f5;
                display: flex;
                padding: 5px 20px;
                box-sizing: border-box;
                align-items: center;
                font-size: 15px;
                line-height: 21px;

                > .text {
                    // 允许我们使用-webkit-line-clamp和-webkit-box-orient属性来控制文本的布局方式。
                    display: -webkit-box;
                    // 设置为3，意味着文本会被限制在三行之内。
                    -webkit-line-clamp: 3;
                    /* 限定文本显示的行数 */
                    -webkit-box-orient: vertical;
                    // 隐藏超出容器的文本部分。由于-webkit-line-clamp限制了文本的行数，超出的文本将会被隐藏。
                    overflow: hidden;
                    // 显示省略号
                    text-overflow: ellipsis;
                }
            }
        }
    }
    .no-data {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #909eab;
    }
}
</style>
